<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="assets/js/knockout-3.3.0.js"></script>

</head>
<body>
	hello

	<button id="xx" data-bind="click:add">xx</button>

	<div data-bind="foreach:names">
	<select
		data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'>
	</select>
	<select
		data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'>
	</select>
	</div>



	<script type="text/javascript">
		var CartLine = function() {
		    var self = this;
		    self.category = ko.observableArray();
		};
	    var categorylocal;
		var Category = function() {
			var self = this;
			this.names = ko.observableArray();
			this.add = function() {
				self.names.push("categorylocal");
				//alert(self.names);
			}
		}
        var cate=new Category();
		ko.applyBindings(cate);
		
		$.getJSON("${siteurl}/category_tree.json", function (data) {
			categorylocal=data;
			cate.names.push(categorylocal);
		});
	</script>

</body>
</html>